
// 导航条 鼠标悬停
var navlist = document.querySelector('.navlist').querySelectorAll('li');

for(var i = 0; i<navlist.length;i++){
    navlist[i].index = i;
    navlist[i].onmouseover = function(){
        navlist[this.index].className = 'active';
    }
    navlist[i].onmouseout = function(){
        navlist[this.index].className = '';
    }
}

// 轮播

var banner = document.querySelector('.box').querySelector('.banner');
    var imglist = document.querySelector('.img-list').querySelectorAll('li');
    var indicatortop = document.querySelector('.indicator-top').querySelectorAll('li');
    var indicatortopa = document.querySelector('.indicator-top').querySelectorAll('a');
    var indicatorfoot = document.querySelector('.indicator-foot').querySelectorAll('li');

    var index = 0;
    var timer = setInterval(nextImg,2000);
    function showImg(){
        for(var i = 0;i<imglist.length;i++){
            imglist[i].className = '';
            indicatortop[i].className ='';
            indicatorfoot[i].className = '';
        }
        imglist[index].className = 'current';
        indicatortop[index].className ='active1';
        indicatorfoot[index].className = 'active2';
    }
    function nextImg(){
        index = index==imglist.length-1 ? 0 : index+1;
        showImg();
    }
    banner.onmouseover = function(){
        clearInterval(timer);
        timer = null;
    }
    banner.onmouseout = function(){
        if (timer != null) {
            return;
        }
        timer = setInterval(nextImg,2000);
    }
    for(var i = 0; i < indicatortopa.length; i++){
        indicatortopa[i].index = i;
        console.log(11111);
        indicatortopa[i].onmouseover = function(){
            index = this.index;
            showImg();
        }
    }

    // 固定侧边导航条
    var fastenimgs = document.querySelector('.fasten').querySelectorAll('img');


    var fastensrc1 = ["./img/people-red.png","./img/shopBag.png","./img/money-red.png",
    "./img/heart-red.png","./img/start-red.png","./img/time-red.png","./img/qianbi-red.png",
    "./img/back-red.png"];
    var fastensrc2 = ["./img/people-black.png","./img/shopBag.png","./img/money-black.png",
    "./img/heart-black.png","./img/start-black.png","./img/time-black.png","./img/qianbi-black.png",
    "./img/back-black.png"];

    for(var i = 0;i<fastenimgs.length;i++){
        fastenimgs[i].index = i;
        fastenimgs[i].onmouseover = function(){
            fastenimgs[this.index].src = fastensrc1[this.index];
        }
        fastenimgs[i].onmouseout = function(){
            fastenimgs[this.index].src = fastensrc2[this.index];
        }
    }
    
    var back = document.querySelector('.back').querySelector('img');

    back.onclick = function(){
        document.scrollingElement.scrollTop = 0;
    }




    var headlist = document.querySelectorAll('.head>ul>li');
    for(var i = 0; i<headlist.length;i++){
        headlist[i].index = i;
        headlist[i].onmouseover = function(){
            this.children[1].children[0].style.left = 0 ;
            this.children[1].children[0].style.width =headlist[this.index].clientWidth + 'px';
            if ( this.index == 8){
                this.children[1].children[0].style.width =headlist[this.index].clientWidth + 'px';
                var w = headlist[this.index].clientWidth;
                var left = 168-w;
                this.children[1].children[0].style.left = left + 'px';
            }  
            if ( this.index == 9){
                this.children[1].children[0].style.width =headlist[this.index].clientWidth + 'px';
                var w = headlist[this.index].clientWidth;
                var left = 258-w;
                this.children[1].children[0].style.left = left + 'px';
            }    
        }
    }

     var back = document.querySelector('.fasten-foot').querySelector('.back');

    back.onclick = function(){
        document.scrollingElement.scrollTop = 0;
    }

    var nav = document.querySelector('.nav');
    window.onscroll = function(){
        var top = document.scrollingElement.scrollTop;
        if(top >= 200){
            nav.style.position = 'fixed';
            nav.style.top = 0;
        }else{
            nav.style.position = 'static';
            nav.style.top = '-100px';
        }
    }
